{% macro aaq_progress(step=0) -%}
  {% set percent = step * 33.3 %}
  {% set steps = (
      _('Pick a product'),
      _('Pick a topic and try some solutions'),
      _('Fill in details')
    )
  %}
  <div id="aaq_progress" class="cf">
    <div class="progress-bar{% if percent == 100 %} complete{% endif %}">
      <div style="width: {{ percent }}%;"></div>
      <ul class="legend">
        {% for step_name in steps %}
          <li {% if steps.index(step_name) == step %}class="current"{% endif %}><span>{{ step_name }}</span></li>
        {% endfor %}
      </ul>
    </div>
  </div>
{%- endmacro  %}

{% macro select_product(products) -%}
  <h2>{{ _('Which product would you like to post a question about?') }}</h2>
  <ul id="product-picker" class="card-grid cf">
    {% for key, product in products.iteritems() %}
      <li>
          <a class="cf" href="{{ url('questions.aaq_step2', product_key=key) }}"
              data-event-category="link click"
              data-event-action="product"
              data-event-label="{{ product.name }}">
              {% if key == 'other' %}
                  <img src="{{ static('sumo/img/dino-logo.png') }}"
                      alt="{{ _(product.name) }}"
                      class="logo-sprite">
              {% else %}
              <img src="{{ image_for_product(product.product) }}"
                  alt="{{ pgettext('DB: products.Product.title', product.title) }}"
                  class="logo-sprite">
              {% endif %}
          <span class="title">{{ product.name }}</span>
          <span class="description">{{ product.subtitle }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
{%- endmacro %}

{% macro selected_product(product, can_change) -%}
  <div id="selected-product">
    <label>{{ _('Product') }}:</label>
    <span>{{ product.name }}</span>
    {% if can_change %}
      <a href="{{ url('questions.aaq_step1') }}">{{ _('change product') }}</a>
    {% endif %}
  </div>
{%- endmacro %}

{% macro select_category(product) -%}
  <div class="highlight-box">
    <h2>{{ _('Which category best describes your problem?') }}</h2>
    <ul class="select-one">
      {% for key, category in product.categories.iteritems() %}
        <li>
          <a href="{{ url('questions.aaq_step3', product_key=product.key, category_key=key) }}"
          data-event-category="link click"
          data-event-action="category"
          data-event-label="{{ category.name }}">{{ category.name }}</a>
        </li>
      {% endfor %}
    </ul>
  </div>
{%- endmacro %}

{% macro selected_category(category, product, can_change) -%}
  <div id="selected-category">
    <label>{{ _('Category') }}:</label>
    <span>{{ category.name }}</span>
    {% if can_change %}
      <a href="{{ url('questions.aaq_step2', product_key=product.key) }}">{{ _('change category') }}</a>
    {% endif %}
  </div>
{%- endmacro %}

{% macro current_articles_and_message(articles, category, html=None, all_articles=False) -%}
  <div class="highlight-box" id="try-an-article">
    {% if html %}
      <h2>{{ html|safe }}</h2>
    {% else %}
      <h2>{{ _('Try one of these articles:') }}</h2>
    {% endif %}
    {% if articles %}
      <ul class="topic-list">
        {% if not all_articles %}
          {% set articles = articles[:4 if request.MOBILE else 5] %}
        {% endif %}
        {% for article in articles %}
          <li>
            <a href="{{ article.url }}" {% if not request.MOBILE %}target="_blank"{% endif %}>{{ article.document_title }}</a>
            {{ article.document_summary }}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
{%- endmacro %}

{% macro aaq_search_form(product, category, settings, host, request, has_searched=False) -%}
  <form id="ask-search-form" class="simple-search-form {% if has_searched %}has-searched{% endif %} cf" action="#summarize-question" method="get">
    <input type="text" class="searchbox" name="search" value="{{ request.GET.search }}" required="required" maxlength="160" placeholder="{{ _("Can't find an answer? Summarize your question in a sentence.") }}" />
    <span data-type="submit" class="button">{{ _('Ask this') }}</span>
  </form>
{%- endmacro %}

{% macro show_results(search_results, product, category, request) -%}
  {% if search_results %}
    <div class="highlight-box">
      <ul class="select-one search-results">
        {% for result in search_results %}
          <li>
            <a href="{{ result['url'] }}">{{ result['title'] }}</a>
            <p>
              {{ result['excerpt_html']|safe }}
            </p>
          </li>
        {% endfor %}
      </ul>
    </div>
    {% set button_text = _('None of these solve my problem') %}
  {% else %}
    <h2 class="no-results">{{ _('This question has not been asked before.') }}</h2>
    {% set button_text = _('Provide more details') %}
  {% endif %}

  <form action="{{ url('questions.aaq_step5', product_key=product.key, category_key=category.key) }}" method="get">
    <input type="hidden" name="search" value="{{ request.GET.search }}" />
    <input type="hidden" name="step" value="{% if user.is_authenticated() %}aaq-question{% else %}aaq-register{% endif %}" />
    <input type="submit" id="show-form-btn" class="button" value="{{ button_text }}" />
  </form>
{%- endmacro %}

{% macro marketplace_category(category_slug, form, error_message) -%}
  {% if category_slug == 'payments' %}
    <h2>
      {% trans %}
        Please visit the
        <a href="https://www.paypal.com/cgi-bin/helpweb?cmd=_help">
          Paypal Help Center</a>.
      {% endtrans %}
    </h2>
  {% elif category_slug == 'applications' %}
    <h2>
      {% trans %}
        Please visit the Marketplace page for the application. There
        you can find the developers' contact information and contact them
        directly.
      {% endtrans %}
    </h2>
  {% elif category_slug == 'account' or category_slug == 'refund' or category_slug == 'developer-request' %}
    {% if error_message %}
      <ul class="errorlist">
        <li>{{ error_message }}</li>
      </ul>
    {% endif %}
    <form id="question-form" class="marketplace" action="" method="post">
      {% csrf_token %}
      <ol>
        {{ form.as_ul() }}
        <li class="submit">
          <button type="submit" class="btn btn-submit big">{{ _('Submit Issue') }}</button>
        </li>
      </ol>
    </form>
  {% endif %}
{%- endmacro %}


{% macro troubleshooting_instructions(field) %}
  <div id="addon-section">
    <a href="{{ settings.TROUBLESHOOTER_ADDON_URL }}" class="btn btn-important" id="add-troubleshooting-info">
      {{ _('Automatically add') }}
    </a>
    <p class="help-text">{{ field.help_text|safe }}</p>
    <p id="troubleshooting-manual">
      {% trans url='#troubleshooting-help,#troubleshooting-field' %}
        A window will open in the top corner. Click Allow, and then click
        Install. If the automated way doesn't work,
        <a class="expander" href="{{ url }}">try these manual steps</a>.
      {% endtrans %}
    </p>
    <ol id="troubleshooting-help">
      <li>{{ _('Open <em>Help &gt; Troubleshooting Information</em>.') }}
        <ul>
          <li>{{ _('Look at the top of your screen, and click the menu item called <em>Help</em>.') }}</li>
          <li>{{ _('A small box will open. Click on an item called <em>Troubleshooting Information</em>.') }}</li>
        </ul>
      </li>
      <li>{{ _('A new window will open. Click on a button called <em>Copy text to clipboard</em>.') }}</li>
      <li>{{ _('Paste the info in the text box below.') }}
        <ul>
          <li>{{ _('Click on the empty box above this text.') }}</li>
          <li>{{ _('Look at the top of your screen, and click the menu item called <em>Edit</em>.') }}</li>
          <li>
            {% trans %}
              A small box will open. Click on the item called <em>Paste</em>.
              Alternatively, type <em>Ctrl+V</em> or <em>Command+V</em>.
            {% endtrans %}
          </li>
          <li>{{ _('Some text will appear in the empty box.') }}</li>
        </ul>
      </li>
    </ol>
  </div>
  <div id="api-section">
    <a href="#" class="btn btn-important" id="share-data">
      {{ _('Share Data') }}
    </a>
    <p class="help-text">{{ _('This information gives details about the internal workings of your browser that will help in answering your question.') }}</p>
  </div>
  <p id="troubleshooting-explanation" class="cf">
    {{ _('This field was populated automatically.') }}
    <a href="#troubleshooting-field" class="expander">{{ _('See the data') }}</a>.
  </p>
  <p id="troubleshooting-field">
    {{ field }}
  </p>
{% endmacro %}
